<template>
  <el-container class="app" direction="vertical">
    <!--<polygon-transfer v-model="polyTransfer"></polygon-transfer>-->
    <!--<opening-animation v-model="isGlobalLoading" v-if="isGlobalLoading"></opening-animation>-->
    <transition
      mode="out-in"
      name="slide-fade"
    >
      <app-header v-if="header"></app-header>
    </transition>

    <el-main class="app__main">
      <transition
        :mode="isOutIn ? 'out-in' : ''"
        name="slide-fade"
      >
        <router-view></router-view>
      </transition>
    </el-main>

    <transition
      name="slide-fade"
    >
      <el-footer v-if="footer" class="app__footer" height="auto">
        <app-footer></app-footer>
      </el-footer>
    </transition>

    <template v-transfer-dom>
      <global-notice></global-notice>
      <global-activity></global-activity>
    </template>

    <customer-service-container></customer-service-container>
    <product-maintain v-if="productionMaintain.flag" :endDate="productionMaintain.endDate"/>
  </el-container>
</template>

<script>
  import AppHeader from '@/views/app-header';
  import AppFooter from '@/views/app-footer';
  import GlobalNotice from '@/views/global-notice';
  import GlobalActivity from '@/views/global-activity';
  import CustomerServiceContainer from '@/components/customer-service/customer-service-container';
  import productMaintain from "@/components/productMaintain/index";

  export default {
    name: 'app-entry',
    components: {
      AppHeader,
      AppFooter,
      GlobalNotice,
      GlobalActivity,
      CustomerServiceContainer,
      productMaintain
    },
    data() {
      return {
        isOutIn: false,
        isGlobalLoading: !sessionStorage.getItem(anim.IS_FIRST_TIME),
        // isGlobalLoading: true,
      };
    },
    watch: {
      header: {
        handler(header) {
          this.$nextTick(() => {
            this.isOutIn = header;
          });
        },

        immediate: true,
      },
      isNeedModifyPassword(isNeedModifyPassword) {
        if (isNeedModifyPassword) {
          this.$confirm('您的账户的密码为初始密码，请尽快修改登录密码！', '温馨提示', {
            confirmButtonText: '立即更改',
            cancelButtonText: '稍后再说',
            type: 'warning'
          }).then(() => {
            this.$router.push({
              name: 'user-safety',
              params: {
                action: 'passwordModify'
              }
            });
          }).catch(() => {
          });
        }
      }
    },
    computed: {
      ...mapState({
        header: state => state.route.meta.header,
        footer: state => state.route.meta.footer,
        isNeedModifyPassword: state => state.user.isNeedModifyPassword,
        maintainConfig: state => state.global.maintainConfig,
      }),
      productionMaintain(){
        let flag = false, endDate = undefined;
        _.each(this.maintainConfig, (item) => {
          if(item.maintenFlag === 1 && item.status === 1) {
            flag = true;
            endDate = _.toTime(item.endDate);
          }
        });
        return { flag, endDate };
      },
      ...mapGetters([
        'isLogin'
      ])
    },
    mounted() {
      this.$store.dispatch(types.GET_GLOBAL_ANNOUNCEMENT);
      //获取配置信息
      this.$store.dispatch(types.GET_MAINTAIN_CONFIG, {type: 4});
    }
  };
</script>

<style lang="scss" scoped>
  @include b(app) {
    width: 100%;
    margin: 0 auto;

    @include e(main) {
      padding: 0;
      // min-height: 500px;
    }
    @include e(footer) {
      padding: 0;
    }
  }
</style>
